<div class="draw-tool">
  <div class="draw-tool-group">
    <div class="draw-tool-item draw-tool-item-side draw-tool-item-side-left">
      <nz-tooltip nzTitle="图形选择工具" nzPlacement="left">
        <button nz-tooltip class="draw-tool-button" [ngClass]="{ 'active': (select$ | async).active }" [disabled]="!(select$ | async).enabled" (click)="setActive('Select')">
          <i class="ege ege-select"></i>
        </button>
      </nz-tooltip>
    </div>
  </div>
  <div class="draw-tool-group">
    <div class="draw-tool-item">
      <nz-tooltip nzTitle="绘制点" nzPlacement="top">
        <button nz-tooltip class="draw-tool-button" [ngClass]="{ 'active': (point$ | async).active }" [disabled]="!(point$ | async).enabled" (click)="setActive('Point')">
          <i class="ege ege-draw-point"></i>
        </button>
      </nz-tooltip>
    </div>
    <div class="draw-tool-item">
      <nz-tooltip nzTitle="绘制线" nzPlacement="top">
        <button nz-tooltip class="draw-tool-button" [ngClass]="{ 'active': (lineString$ | async).active }" [disabled]="!(lineString$ | async).enabled" (click)="setActive('LineString')">
          <i class="ege ege-draw-line"></i>
        </button>
      </nz-tooltip>
    </div>
    <div class="draw-tool-item">
      <nz-tooltip nzTitle="绘制圆" nzPlacement="top">
        <button nz-tooltip class="draw-tool-button" [ngClass]="{ 'active': (circle$ | async).active }" [disabled]="!(circle$ | async).enabled" (click)="setActive('Circle')">
          <i class="ege ege-draw-cricle"></i>
        </button>
      </nz-tooltip>
    </div>
    <div class="draw-tool-item">
      <nz-tooltip nzTitle="绘制矩形" nzPlacement="top">
        <button nz-tooltip class="draw-tool-button" [ngClass]="{ 'active': (rectangle$ | async).active }" [disabled]="!(rectangle$ | async).enabled" (click)="setActive('Rectangle')">
          <i class="ege ege-draw-rectangle"></i>
        </button>
      </nz-tooltip>
    </div>  
    <div class="draw-tool-item">
      <nz-tooltip nzTitle="绘制多边形" nzPlacement="top">
        <button nz-tooltip class="draw-tool-button" [ngClass]="{ 'active': (polygon$ | async).active }" [disabled]="!(polygon$ | async).enabled" (click)="setActive('Polygon')">
          <i class="ege ege-draw-polygon"></i>
        </button>
      </nz-tooltip>
    </div> 
  </div>
  <div class="draw-tool-group">
    <nz-dropdown [nzPlacement]="'bottom'" [nzTrigger]="'click'" [nzClickHide]="false" [(nzVisible)]="inputMarkVisible" (nzVisibleChange)="inputMarkVisibleChange($event)">
      <div class="draw-tool-item">
        <nz-tooltip nzTitle="输入经纬度绘制点" nzPlacement="top">
          <button nz-tooltip nz-dropdown class="draw-tool-button" [ngClass]="{ 'active': (inputMark$ | async).active }" [disabled]="!(inputMark$ | async).enabled" (click)="setActive('InputMark')">
            <i class="ege ege-input-mark"></i>
          </button>
        </nz-tooltip>
      </div>
      <div class="input-mark-container" nz-dropdown-custom>
        <ege-input-mark (ok)="setInputMark($event)" (cancel)="hiddeInputMark()"></ege-input-mark>
      </div>
    </nz-dropdown>
  </div>
  <div class="draw-tool-group">
    <nz-tooltip [nzTitle]="'显示测量数值'">
      <div class="switch-container" nz-tooltip>
        <nz-switch [formControl]="measureFormControl" [nzSize]="'small'"></nz-switch>
      </div>
    </nz-tooltip>
  </div>
  <div class="draw-tool-group">
    <nz-dropdown [nzPlacement]="'bottomRight'" [nzTrigger]="'click'" [nzClickHide]="false" [(nzVisible)]="bufferVisible" (nzVisibleChange)="bufferVisibleChange($event)">
      <div class="draw-tool-item">
        <nz-tooltip nzTitle="设置缓冲区" nzPlacement="top">
          <button nz-tooltip nz-dropdown class="draw-tool-button" [ngClass]="{ 'active': (buffer$ | async).active }" [disabled]="!(buffer$ | async).enabled" (click)="setActive('Buffer')">
            <i class="ege ege-buffer"></i>
          </button>
        </nz-tooltip>
      </div>
      <div class="buffer-container" nz-dropdown-custom>
        <ege-buffer [buffer]="defaultBufferValue" [unit]="defaultUnitVlaue" (onOk)="setBuffer($event)" (onCancel)="hiddeBuffer()"></ege-buffer>
      </div>
    </nz-dropdown>
  </div>
  <div class="draw-tool-group">
    <div class="draw-tool-item">
      <nz-tooltip nzTitle="移除选择的图形" nzPlacement="top">
        <button nz-tooltip class="draw-tool-button" [disabled]="!(remove$ | async).enabled" (click)="setActive('Remove')">
          <i class="ege ege-remove"></i>
        </button>
      </nz-tooltip>
    </div>
    <div class="draw-tool-item draw-tool-item-side draw-tool-item-side-right">
      <nz-tooltip nzTitle="清除所有图形" nzPlacement="top">
        <button nz-tooltip class="draw-tool-button" [disabled]="!(clean$ | async).enabled" (click)="setActive('Clean')">
          <i class="ege ege-clear"></i>
        </button>
      </nz-tooltip>
    </div>
  </div>
</div>